import React from "react"
import {Button, Input, Modal,Form ,message} from "antd"
//引入封装完成的fetch方法
import {get,post,formPost} from "../common/request";

const FormItem = Form.Item;
const {Textarea} = Input;

class Sale extends React.Component{

	/*
	* 发布商品的界面，暂定使用modal来实现，字段：
	* name：
	* type：
	* original_price:
	* sale_price
	* location:
	* image:
	* description:
	* */

	constructor(props){
		super(props);
		this.state = {
			visible: false,
			confirmLoading : false
		};
	}

	showModal(){
		this.setState({
			visible: true,
			confirmLoading : "false"
		});
	}

	//发布物品信息接口
	handleOk(){
		const form = this.props.form;
		var data = {
			name : form.getFieldValue('name'),
			type : form.getFieldValue('type'),
			original_price : form.getFieldValue('original_price'),
			sale_price : form.getFieldValue('sale_price'),
			location : form.getFieldValue('location'),
			image : form.getFieldValue('image'),
			description : form.getFieldValue('description')
		};
		this.setState({
			confirmLoading : true
		});
		post("/api/launch/",data).then(json=>{
			if(json.code === "200"){
				this.setState({
					visible: false,
					confirmLoading : false
				},()=>{
					message.success("物品添加成功");
				});
			}
			else{
				message.error(json.message);
			}
		});
	}
	handleCancel(){
		this.setState({
			visible: false,
		});
	}

	render(){
		const { getFieldDecorator } = this.props.form;
		return (
			<div>
				<Button type="primary" onClick={this.showModal.bind(this)}>Open</Button>
				<Modal
					title="发布商品"
					visible={this.state.visible}
					onOk={this.handleOk.bind(this)}
					onCancel={this.handleCancel.bind(this)}
					okText="发布"
					cancelText="取消"
					confirmLoading={this.confirmLoading}
				>
					<Form onSubmit={this.handleSubmit} className="login-form">
						<FormItem label="name">
							{getFieldDecorator('name:', {
								rules: [{ required: true, message: 'Please input name!' }],
							})(
								<Input placeholder="name" />
							)}
						</FormItem>
						<FormItem label="type:">
							{getFieldDecorator('type', {
								rules: [{ required: true, message: 'Please input type!' }],
							})(
								<Input placeholder="type" />
							)}
						</FormItem>
						<FormItem label="original-price:">
							{getFieldDecorator('original_price', {
								rules: [{ required: true, message: 'Please input  original_price!' }],
							})(
								<Input placeholder="original_price" />
							)}
						</FormItem>
						<FormItem label="sale-price:">
							{getFieldDecorator('sale_price', {
								rules: [{ required: true, message: 'Please input  sale_price!' }],
							})(
								<Input placeholder="sale_price" />
							)}
						</FormItem>
						<FormItem label="location:">
							{getFieldDecorator('location', {
								rules: [{ required: true, message: 'Please input  location!' }],
							})(
								<Input placeholder="location" />
							)}
						</FormItem>
						<FormItem label="image:">
							{getFieldDecorator('image', {
								rules: [{ required: true, message: 'Please upload  image!' }],
							})(
								<Input placeholder="image" />
							)}
						</FormItem>
						<FormItem label="description:">
							{getFieldDecorator('description', {
								rules: [{ required: true, message: 'Please input  description!' }],
							})(
								<Textarea placeholder="description" />
							)}
						</FormItem>
						<FormItem>
							<Button type="primary" htmlType="submit" className="login-form-button">
								Log in
							</Button>
						</FormItem>
					</Form>

				</Modal>
			</div>
		);
	}
}

export default Sale = Form.create()(Sale);
